<template>
  <div class="salesman-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title"><i class="el-icon-user-solid"></i> 业务员管理</span>
        <div class="header-actions">
          <el-button
            class="add-btn"
            type="primary"
            icon="el-icon-plus"
            @click="showAddDialog">
            <span class="btn-text">新增业务员</span>
          </el-button>
          <el-button
            class="refresh-btn"
            type="success"
            icon="el-icon-refresh"
            @click="refreshData">
            <span class="btn-text">刷新数据</span>
          </el-button>
        </div>
      </div>

      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="业务员姓名">
            <el-input v-model="searchForm.name" placeholder="请输入业务员姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="待审核" :value="1"></el-option>
              <el-option label="已通过" :value="2"></el-option>
              <el-option label="已拒绝" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据表格 -->
      <configurable-table
        :columns="tableColumns"
        :data="tableData"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        :default-sort="{prop: 'createTime', order: 'descending'}"
        @page-change="loadData"
        border>
        <!-- 姓名列 -->
        <template #name="{ row }">
          <div class="salesman-info">
            <i class="el-icon-user"></i>
            <span>{{ row.name }}</span>
          </div>
        </template>
        <!-- 手机号列 -->
        <template #phone="{ row }">
          <div class="phone-info">
            <i class="el-icon-phone"></i>
            <span>{{ row.phone }}</span>
          </div>
        </template>
        <!-- 身份证号列 -->
        <template #idNo="{ row }">
          <span>{{ row.idNo || '未填写' }}</span>
        </template>
        <!-- 地址列 -->
        <template #address="{ row }">
          <div class="address-info">
            <i class="el-icon-location"></i>
            <span>{{ row.address || '未填写' }}</span>
          </div>
        </template>
        <!-- 业务员编码列 -->
        <template #salesmanNo="{ row }">
          <el-tag v-if="row.salesmanNo" type="success" size="small">
            {{ row.salesmanNo }}
          </el-tag>
          <span v-else class="no-code">未分配</span>
        </template>
        <!-- 审核状态列 -->
        <template #status="{ row }">
          <el-tag :type="getStatusTag(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
        <!-- 管理商家数列 -->
        <template #merchantCount="{ row }">
          <div class="merchant-count-display">
            <span class="count-value">{{ row.merchantCount || 0 }}</span>
            <el-tag
              :type="getMerchantCountTag(row.merchantCount)"
              size="mini"
              class="count-tag">
              {{ getMerchantCountLevel(row.merchantCount) }}
            </el-tag>
          </div>
        </template>
        <!-- 申请时间列 -->
        <template #createTime="{ row }">
          <div class="time-info">
            <i class="el-icon-time"></i>
            <span>{{ row.createTime }}</span>
          </div>
        </template>
        <!-- 操作列 -->
        <template #actions="{ row }">
          <el-button size="mini" icon="el-icon-view" @click="handleView(row)">查看</el-button>
          <el-button
            v-if="row.status === 1"
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button
            v-if="row.status === 3"
            size="mini"
            type="primary"
            icon="el-icon-refresh"
            @click="handleResubmit(row)">
            重新提交
          </el-button>
        </template>
      </configurable-table>
    </el-card>

    <!-- 新增业务员对话框 -->
    <el-dialog
      title="新增业务员"
      :visible.sync="addDialogVisible"
      width="800px"
      custom-class="action-dialog"
      :close-on-click-modal="false">

      <div slot="title" class="dialog-title">
        <i class="el-icon-user-solid"></i>
        <span>新增业务员</span>
      </div>

      <div class="add-form-content">
        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px" class="action-form">
          <!-- 基本信息区域 -->
          <div class="form-section">
            <div class="section-title">
              <i class="el-icon-user"></i>
              <span>基本信息</span>
            </div>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input
                    v-model="addForm.name"
                    placeholder="请输入业务员姓名"
                    prefix-icon="el-icon-user">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                  <el-input
                    v-model="addForm.phone"
                    placeholder="请输入手机号"
                    prefix-icon="el-icon-phone">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证号" prop="idNo">
                  <el-input
                    v-model="addForm.idNo"
                    placeholder="请输入身份证号"
                    prefix-icon="el-icon-postcard">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细地址" prop="address">
                  <el-input
                    v-model="addForm.address"
                    placeholder="请输入详细地址"
                    prefix-icon="el-icon-location">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 证件资料区域 -->
          <div class="form-section">
            <div class="section-title">
              <i class="el-icon-picture"></i>
              <span>证件资料</span>
            </div>

            <el-form-item label="身份证照片" prop="idCardUrl">
              <div class="upload-wrapper">
                <el-upload
                  class="upload-container"
                  :action="uploadUrl"
                  :headers="uploadHeaders"
                  :on-success="handleIdCardSuccess"
                  :before-upload="beforeUpload"
                  :on-progress="(event, file) => { uploading.idCard = true }"
                  :show-file-list="false">
                  <div class="upload-area" v-if="!addForm.idCardUrl">
                    <i class="el-icon-plus upload-icon"></i>
                    <div class="upload-text">点击上传</div>
                    <div class="upload-tip-text">JPG/PNG，不超过2MB</div>
                  </div>
                  <div class="upload-preview" v-else>
                    <el-image
                      :src="addForm.idCardUrl"
                      fit="cover"
                      :preview-src-list="[addForm.idCardUrl]"
                      class="preview-image">
                      <div slot="error" class="image-slot-error">
                        <i class="el-icon-picture-outline"></i>
                        <div class="error-text">图片加载失败</div>
                      </div>
                    </el-image>
                    <div class="upload-mask" @click.stop>
                      <i class="el-icon-delete" @click.stop="addForm.idCardUrl = ''" title="删除图片"></i>
                    </div>
                  </div>
                </el-upload>
              </div>
            </el-form-item>
          </div>

          <!-- 审核说明 -->
          <div class="notice-section">
            <el-alert
              title="审核说明"
              type="info"
              description="区域代理添加的业务员需要总公司审核通过后才能正式成为业务员，审核通过后将自动分配业务员编码。"
              show-icon
              :closable="false">
            </el-alert>
          </div>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button type="primary" @click="handleAddSubmit" :loading="addLoading">
          <i class="el-icon-check" v-if="!addLoading"></i>
          提交审核
        </el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      title="业务员详情"
      :visible.sync="detailDialogVisible"
      width="900px"
      custom-class="view-dialog"
      :close-on-click-modal="false">

      <div slot="title" class="dialog-title">
        <i class="el-icon-user-solid"></i>
        <span>业务员详情</span>
      </div>

      <div class="detail-content" v-if="detailData">
        <!-- 状态横幅 -->
        <div :class="['status-banner', `status-${detailData.status}`]">
          <div class="status-icon">
            <i :class="getStatusIcon(detailData.status)"></i>
          </div>
          <div class="status-info">
            <div class="status-label">审核状态</div>
            <div class="status-value">{{ getStatusText(detailData.status) }}</div>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-user"></i>
            <span>基本信息</span>
          </div>

          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-postcard"></i>
                  业务员ID
                </div>
                <div class="info-value">{{ detailData.id || '无' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-user"></i>
                  姓名
                </div>
                <div class="info-value">{{ detailData.name || '无' }}</div>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-phone"></i>
                  手机号
                </div>
                <div class="info-value">{{ detailData.phone || '无' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-postcard"></i>
                  身份证号
                </div>
                <div class="info-value">{{ detailData.idNo || '无' }}</div>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="24">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-location"></i>
                  详细地址
                </div>
                <div class="info-value">{{ detailData.address || '无' }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 业务信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-s-order"></i>
            <span>业务信息</span>
          </div>

          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-tickets"></i>
                  业务员编码
                </div>
                <div class="info-value">
                  <span v-if="detailData.salesmanNo" class="highlight-number">{{ detailData.salesmanNo }}</span>
                  <span v-else class="no-code">未分配</span>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-s-shop"></i>
                  管理商家数
                </div>
                <div class="info-value">
                  <span class="highlight-number">{{ detailData.merchantCount || 0 }}</span>
                  <span> 个</span>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-time"></i>
                  申请时间
                </div>
                <div class="info-value">{{ detailData.createTime || '无' }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 身份证照片 -->
        <div class="info-section" v-if="detailData.idCardUrl">
          <div class="section-title">
            <i class="el-icon-picture"></i>
            <span>证件资料</span>
          </div>
          <div class="certificate-grid">
            <div class="certificate-card" @click="previewImage(detailData.idCardUrl)">
              <div class="certificate-label">
                <i class="el-icon-postcard"></i>
                身份证照片
              </div>
              <div class="certificate-image">
                <img :src="detailData.idCardUrl" alt="身份证照片">
                <div class="image-overlay">
                  <i class="el-icon-zoom-in"></i>
                  <span>点击预览</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 拒绝原因 -->
        <div class="info-section reason-section" v-if="detailData.reason">
          <div class="section-title">
            <i class="el-icon-warning"></i>
            <span>审核反馈</span>
          </div>
          <div class="reason-content">
            <i class="el-icon-warning-outline"></i>
            {{ detailData.reason }}
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">
          <i class="el-icon-close"></i>
          关闭
        </el-button>
      </div>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog
      :visible.sync="imagePreviewVisible"
      width="70%"
      custom-class="image-preview-dialog"
      append-to-body>
      <img :src="previewImageUrl" class="preview-image">
    </el-dialog>
  </div>
</template>

<script>
import { getSalesmanPage, submitSalesmanAudit } from '@/api/aggregation'
import { getToken } from '@/utils/auth'

export default {
  name: 'AgentSalesmanManagement',
  data() {
    return {
      loading: false,
      searchForm: {
        name: '',
        phone: '',
        status: null
      },
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      // 表格列配置
      tableColumns: [
        { prop: 'id', label: '业务员ID', minWidth: 80, align: 'center' },
        { prop: 'name', label: '姓名', minWidth: 120, slot: 'name' },
        { prop: 'phone', label: '手机号', minWidth: 130, slot: 'phone' },
        { prop: 'idNo', label: '身份证号', minWidth: 180, slot: 'idNo' },
        { prop: 'address', label: '地址', minWidth: 200, showOverflowTooltip: true, slot: 'address' },
        { prop: 'salesmanNo', label: '业务员编码', minWidth: 120, slot: 'salesmanNo' },
        { prop: 'status', label: '审核状态', minWidth: 100, slot: 'status' },
        { prop: 'merchantCount', label: '管理商家数', minWidth: 120, sortable: true, slot: 'merchantCount' },
        { prop: 'createTime', label: '申请时间', minWidth: 180, sortable: true, slot: 'createTime' },
        { prop: 'actions', label: '操作', minWidth: 200, slot: 'actions', fixed: false }
      ],
      // 新增对话框
      addDialogVisible: false,
      addLoading: false,
      addForm: {
        name: '',
        phone: '',
        idNo: '',
        address: '',
        idCardUrl: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入业务员姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        idNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        idCardUrl: [
          { required: true, message: '请上传身份证照片', trigger: 'change' }
        ]
      },
      // 详情对话框
      detailDialogVisible: false,
      detailData: null,
      // 图片预览
      imagePreviewVisible: false,
      previewImageUrl: '',
      // 文件上传
      uploadUrl: '/agg/file/upload',
      uploadHeaders: {
        'token': getToken()
      },
      uploading: {
        idCard: false
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        const params = {
          pageIndex: this.pagination.current,
          pageSize: this.pagination.size,
          type: 2 // 业务员类型
        }

        // 添加搜索条件
        if (this.searchForm.name) {
          params.name = this.searchForm.name
        }
        if (this.searchForm.phone) {
          params.phone = this.searchForm.phone
        }
        if (this.searchForm.status !== null && this.searchForm.status !== '') {
          params.status = this.searchForm.status
        }

        const response = await getSalesmanPage(params)

        if (response.code === 0) {
          this.tableData = response.data.list || []
          this.pagination.total = response.data.total || 0
        } else {
          this.tableData = []
          this.pagination.total = 0
        }
      } catch (error) {
        Logger.error('加载业务员数据失败:', error)
        this.tableData = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },


    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadData()
    },

    // 重置
    handleReset() {
      this.searchForm = {
        name: '',
        phone: '',
        status: null
      }
      this.loadData()
    },

    // 刷新数据
    refreshData() {
      this.$message.success('数据已刷新')
      this.loadData()
    },

    // 显示新增对话框
    showAddDialog() {
      this.addDialogVisible = true
      this.resetAddForm()
    },

    // 重置新增表单
    resetAddForm() {
      this.addForm = {
        name: '',
        phone: '',
        idNo: '',
        address: '',
        idCardUrl: ''
      }
      this.uploading.idCard = false
      if (this.$refs.addForm) {
        this.$refs.addForm.clearValidate()
      }
    },

    // 提交新增
    async handleAddSubmit() {
      try {
        await this.$refs.addForm.validate()
        this.addLoading = true

        const params = {
          name: this.addForm.name,
          phone: this.addForm.phone,
          idNo: this.addForm.idNo,
          address: this.addForm.address,
          idCardUrl: this.addForm.idCardUrl,
          regionId: this.$store.state.user.regionId // 当前区域代理的regionId
        }

        Logger.log('区域代理提交业务员审核，参数:', params)
        const response = await submitSalesmanAudit(params)
        Logger.log('提交业务员审核API响应:', response)

        if (response.code === 0) {
          this.$message.success('业务员审核申请已提交，等待总公司审核')
          this.addDialogVisible = false
          this.loadData()
        } else {
          this.$message.error('提交失败: ' + (response.data?.msg || '未知错误'))
        }
      } catch (error) {
        Logger.error('提交业务员审核失败:', error)
        this.$message.error('提交失败，请重试')
      } finally {
        this.addLoading = false
      }
    },

    // 查看详情
    handleView(row) {
      this.detailData = row
      this.detailDialogVisible = true
    },

    // 编辑
    handleEdit(row) {
      this.$message.info('编辑功能开发中...')
    },

    // 重新提交
    handleResubmit(row) {
      this.$confirm('确定要重新提交该业务员的审核申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.info('重新提交功能开发中...')
      })
    },

    // 文件上传前验证
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('只能上传 JPG/PNG 格式的图片!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 处理图片URL - 如果是相对路径，转换为完整路径
    getImageUrl(url) {
      if (!url) return ''
      // 如果已经是完整URL（以http或https开头），直接返回
      if (url.startsWith('http://') || url.startsWith('https://')) {
        return url
      }
      // 如果是相对路径（以/开头），可能是OSS路径或本地路径，直接返回让浏览器处理
      if (url.startsWith('/')) {
        return url
      }
      // 其他情况，尝试添加/profile前缀（本地存储）
      return `/profile/${url}`
    },

    // 身份证上传成功
    handleIdCardSuccess(response) {
      this.uploading.idCard = false
      Logger.log('身份证上传响应:', response)
      if (response && response.code === 0) {
        // 优先使用data字段，如果没有则使用msg字段（兼容不同接口返回格式）
        const imageUrl = response.data || response.msg || ''
        if (imageUrl) {
          this.addForm.idCardUrl = this.getImageUrl(imageUrl)
          this.$message.success('身份证照片上传成功')
        } else {
          this.$message.error('上传成功但未返回图片URL')
        }
      } else {
        this.$message.error('身份证照片上传失败: ' + (response?.msg || '未知错误'))
      }
    },


    // 获取状态标签类型
    getStatusTag(status) {
      const statusMap = {
        1: 'warning',  // 审核中
        2: 'success',  // 已通过
        3: 'danger',   // 已拒绝
        0: 'info'      // 待审核
      }
      return statusMap[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '审核中',
        2: '已通过',
        3: '已拒绝',
        0: '待审核'
      }
      return statusMap[status] || '待审核'
    },

    // 获取商家数量标签类型
    getMerchantCountTag(count) {
      if (count >= 5) return 'success'
      if (count >= 3) return 'warning'
      return 'info'
    },

    // 获取商家数量等级
    getMerchantCountLevel(count) {
      if (count >= 5) return '优秀'
      if (count >= 3) return '良好'
      return '一般'
    },

    // 获取状态图标
    getStatusIcon(status) {
      const iconMap = {
        1: 'el-icon-time',        // 待审核
        2: 'el-icon-success',     // 已通过
        3: 'el-icon-error',       // 已拒绝
        0: 'el-icon-time'         // 默认
      }
      return iconMap[status] || 'el-icon-time'
    },

    // 预览图片
    previewImage(url) {
      if (!url) return
      this.previewImageUrl = url
      this.imagePreviewVisible = true
    }
  }
}
</script>

<style scoped>
.salesman-management {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-actions {
  float: right;
}

.add-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  margin-right: 10px;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.refresh-btn {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(86, 171, 47, 0.3);
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(86, 171, 47, 0.4);
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.salesman-info, .phone-info, .address-info, .time-info {
  display: flex;
  align-items: center;
}

.salesman-info i, .phone-info i, .address-info i, .time-info i {
  margin-right: 5px;
  color: #409eff;
}

.merchant-count-display {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.count-value {
  font-weight: bold;
  color: #303133;
}

.count-tag {
  margin-left: 5px;
}

.no-code {
  color: #909399;
  font-style: italic;
}


/* 详情对话框标题样式 */
.dialog-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;

  i {
    margin-right: 8px;
    color: #409eff;
    font-size: 20px;
  }
}

.detail-content {
  padding: 0;
}

/* 未分配编码样式 */
.no-code {
  color: #909399;
  font-style: italic;
  font-size: 14px;
}

/* 新增表单内容 */
.add-form-content {
  .form-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }

    .section-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid #e9ecef;

      i {
        margin-right: 8px;
        color: #409EFF;
        font-size: 18px;
      }
    }
  }

  .action-form {
    margin-top: 0;

    .el-form-item {
      margin-bottom: 24px;
    }

    .el-form-item__label {
      font-weight: 600;
      color: #495057;
    }

    .el-input__inner:focus {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }

    .el-input__prefix {
      left: 12px;
    }
  }

  /* 上传组件样式 */
  .upload-wrapper {
    width: 360px;

    .upload-container {
      width: 100%;
    }

    .upload-area {
      width: 100%;
      height: 180px;
      border: 2px dashed #d9d9d9;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background-color: #fafafa;
      position: relative;
      overflow: hidden;
    }

    .upload-area:hover {
      border-color: #409EFF;
      background-color: #f0f9ff;
    }

    .upload-icon {
      font-size: 48px;
      color: #8c939d;
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }

    .upload-area:hover .upload-icon {
      color: #409EFF;
      transform: scale(1.1);
    }

    .upload-text {
      color: #606266;
      font-size: 14px;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .upload-tip-text {
      color: #909399;
      font-size: 12px;
    }

    .upload-preview {
      position: relative;
      width: 100%;
      height: 180px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #e4e7ed;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .preview-image {
      width: 100%;
      height: 100%;
      display: block;
    }

    .image-slot-error {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: #f5f7fa;
      color: #909399;
    }

    .image-slot-error i {
      font-size: 48px;
      margin-bottom: 8px;
      color: #c0c4cc;
    }

    .image-slot-error .error-text {
      font-size: 14px;
      color: #909399;
    }

    .upload-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      cursor: pointer;
    }

    .upload-preview:hover .upload-mask {
      opacity: 1;
    }

    .upload-mask i {
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      transition: all 0.2s ease;
      background-color: rgba(245, 108, 108, 0.85);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .upload-mask i:hover {
      transform: scale(1.15);
      background-color: #f56c6c;
      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.5);
    }
  }

  /* 提示信息区域 */
  .notice-section {
    margin-top: 24px;

    .el-alert {
      border-radius: 8px;
      border: 1px solid #e1f3ff;
      background: linear-gradient(135deg, #f0f9ff 0%, #e1f3ff 100%);

      .el-alert__title {
        font-weight: 600;
        color: #2c3e50;
      }

      .el-alert__description {
        color: #606266;
        line-height: 1.6;
        margin-top: 8px;
      }

      .el-alert__icon {
        font-size: 18px;
      }
    }
  }

  /* 对话框底部按钮 */
  .dialog-footer {
    border-top: 1px solid #e8eaed;
    padding-top: 16px;
    text-align: right;

    .el-button {
      padding: 9px 20px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;

      i {
        margin-right: 4px;
      }

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    .el-button--default {
      color: #606266;
      border-color: #dcdfe6;
      background: #ffffff;

      &:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background: #ecf5ff;
      }
    }

    .el-button--primary {
      background: #409eff;
      border-color: #409eff;

      &:hover {
        background: #66b1ff;
        border-color: #66b1ff;
      }

      &:active {
        background: #3a8ee6;
        border-color: #3a8ee6;
      }
    }
  }
}

/* 详情对话框标题样式（保持原有样式，不影响详情对话框） */
.dialog-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;

  i {
    margin-right: 8px;
    color: #409eff;
    font-size: 20px;
  }
}

.upload-demo {
  width: 100%;
}

/* 图片预览对话框样式优化 */
.el-dialog.image-preview-dialog {
  max-width: 90vw;
  background: #000;
}

.el-dialog.image-preview-dialog .el-dialog__header {
  border-bottom: none;
  padding: 10px 16px;
}

.el-dialog.image-preview-dialog .el-dialog__title {
  color: #fff;
}

.el-dialog.image-preview-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.el-dialog.image-preview-dialog .el-dialog__body {
  padding: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: none;
  cursor: zoom-in;
}
</style>

/* 新增业务员对话框样式已移至公共样式 dialog.scss */
